<template>
    <customNavigationBar title="奖励中心">
        <!-- <template #right>
            <view class="right" @click="popUp">奖励规则</view>
        </template> -->
    </customNavigationBar>

    <view class="page">
        <view class="banner" v-if="ownTeam?.length > 1">
            <image src="/static/home/rewardCenter_banner.png" mode="widthFix"></image>

            <view class="bannerContent">
                <view class="groupMoney">
                    <span>我的团队账户总金额(元)</span>
                    <span>{{ ownTeamMoney?.totalRevenue || 0 }}</span>
                </view>

                <view class="AssignableMoney">
                    <span>可分配账户余额(元)</span>
                    <span>{{ ownTeamMoney?.bonusPoolAmount || 0 }}</span>
                </view>
            </view>
        </view>

        <view class="banner">
            <image src="/static/home/rewardCenter_banner.png" mode="widthFix"></image>

            <view class="bannerContent">
                <view class="groupMoney">
                    <span>我加入的团队 账户总金额(元)</span>
                    <span>{{ joinTeamMoney?.totalRevenue || 0 }}</span>
                </view>

                <view class="AssignableMoney">
                    <span>可分配账户余额(元)</span>
                    <span>{{ joinTeamMoney?.bonusPoolAmount || 0 }}</span>
                </view>
            </view>
        </view>

        <navigator class="submit" url="/pages_finance/withdrawal/withdrawal" hover-class="navigator-hover">提现</navigator>

        <view class="card">
            <view class="title">团队管理</view>

            <view class="items">
                <navigator class="item" url="/pages_home/myGroup/myGroup" hover-class="none">
                    <image class="icon" src="/static/home/rewardCenter_icon1.png" mode=""></image>
                    <view>我的团队</view>
                    <image src="/static/common/icon_more.png" mode="widthFix"></image>
                </navigator>

                <!-- <view class="item" @click="goQRCode">
                    <image class="icon" src="/static/home/rewardCenter_icon2.png" mode=""></image>
                    <view>推广二维码</view>
                    <image src="/static/common/icon_more.png" mode="widthFix"></image>
                </view> -->
            </view>
        </view>
    </view>
    <!--    <uni-popup ref="popup" :is-mask-click="false">
        <view class="popupBox">
            <view class="title">奖励规则</view>

            <view class="scrollBox">
                <scroll-view scroll-y="true" class="scrollView">
                    <view v-if="userRole == 1">
                        平台收取的交易佣金的20%奖励给悦居管家，当悦居管家升级为金牌管家后即成为小区服务商，金牌管家服务其它悦居管家时，平台再奖励服务其它悦居管家缴纳的代理费总额的5%作为服务费用，同时奖励其它悦居管家，平台收取的交易佣金的3%作为服务奖励。
                    </view>

                    <view v-if="userRole == 2">
                        平台收取的交易佣金的3%奖励给运营中心，当运营中心升级为金牌运营中心后即成为服务商，金牌运营中心服务其它运营中心时，平台再奖励服务其它运营中心缴纳的代理费总额的5%作为服务费用，同时奖励其它运营中心，平台收取的交易佣金的1%作为服务奖励。
                    </view>
                </scroll-view>
            </view>

            <view class="close" @click="popup.close()">
                <image src="/static/common/icon_close_circle.png" mode=""></image>
            </view>
        </view>
    </uni-popup> -->
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { homeApis } from '@/utils/apis';

onShow(() => {
    getData();
    userRole.value = JSON.parse(uni.getStorageSync('userInfomation')).identityType;
});
const userRole = ref(null);
const joinTeamMoney = ref(null);
const ownTeamMoney = ref(null);
const ownTeam = ref(null);
const getData = async () => {
    let res = await homeApis.getGroupPoolMoney();
    let res2 = await homeApis.getOwnTeam();

    joinTeamMoney.value = res.data.joinTeam;
    ownTeamMoney.value = res.data.myTeam;
    ownTeam.value = res2.data.records;
};

const popup = ref();

const popUp = () => {
    popup.value.open();
};

const goQRCode = () => {
    let infomation = JSON.parse(uni.getStorageSync('userInfomation'));

    if (!infomation.authentication.authenticationName) {
        uni.showModal({
            title: '提示',
            content: '为保障创客权益，遵守国家法律法规，请上传身份证',
            confirmText: '去认证',
            success(res) {
                if (res.confirm) {
                    uni.navigateTo({
                        url: '/pages_user/realNameAuth/realNameAuth'
                    });
                }
            }
        });
        return;
    }

    uni.navigateTo({
        url: '/pages_home/promotionQRcode/promotionQRcode'
    });
};
</script>

<style lang="scss">
page {
    background-color: #f2f3f5;
}
</style>

<style lang="scss" scoped>
.page {
    padding: 24rpx;
}
.right {
    font-size: 32rpx;
    color: #333333;
}

.popupBox {
    position: relative;
    width: 604rpx;
    height: 500rpx;
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    .title {
        width: 100%;
        height: 80rpx;
        background: #ff6543;
        border-radius: 16rpx 16rpx 0rpx 0rpx;

        font-size: 32rpx;
        color: #ffffff;
        line-height: 80rpx;
        text-align: center;
    }

    .scrollBox {
        padding: 16rpx;
        width: 100%;
        height: 420rpx;

        .scrollView {
            height: 100%;
            width: 100%;

            font-size: 22rpx;
            color: #333333;
            line-height: 36rpx;
        }
    }

    .close {
        position: absolute;
        left: 50%;
        bottom: -92rpx;
        transform: translateX(-50%);

        image {
            width: 56rpx;
            height: 56rpx;
        }
    }
}

.banner {
    width: 100%;
    position: relative;
    margin-bottom: 30rpx;

    image {
        width: 100%;
    }
    .bannerContent {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        padding: 24rpx 40rpx;
        .groupMoney {
            margin-bottom: 24rpx;
            span {
                display: block;
                font-size: 24rpx;
                color: #ffffff;
                margin-bottom: 16rpx;
            }
            span:last-child {
                font-weight: bold;
                font-size: 52rpx;
                color: #ffffff;
                line-height: 74rpx;
            }
        }

        .AssignableMoney {
            span {
                display: block;
                font-size: 24rpx;
                color: #ffffff;
                margin-bottom: 20rpx;
            }
            span:last-child {
                font-weight: bold;
                font-size: 24rpx;
                color: #ffffff;
                line-height: 34rpx;
            }
        }
    }
}

.submit {
    width: 100%;
    height: 80rpx;
    background: #ff6543;
    border-radius: 40rpx;
    margin: 30rpx 0;
    font-size: 28rpx;
    color: #ffffff;
    line-height: 80rpx;
    text-align: center;
}

.card {
    width: 100%;
    padding: 24rpx 20rpx 24rpx 40rpx;
    background: #ffffff;
    border-radius: 16rpx;
    .title {
        font-weight: bold;
        font-size: 36rpx;
        color: #333333;
        margin-bottom: 32rpx;
    }

    .items {
        .item {
            display: flex;
            align-items: center;
            margin-bottom: 48rpx;

            &:last-child {
                margin-bottom: 0;
            }

            image {
                width: 16rpx;
            }
            .icon {
                width: 60rpx;
                height: 60rpx;
                margin-right: 20rpx;
            }
            view {
                flex: 1;
                font-weight: 400;
                font-size: 28rpx;
                color: #333333;
                text-align: left;
            }
        }
    }
}
</style>
